<style lang="less">
    @import "../../../styles/table.less";
</style>
<template>
    <div class="search">
        <Row>
            <Col span="5">
                <Card title="考试类型" style="height:100%">
                    <Row class="operation">
                        <Button @click="addIndustryType" type="primary" icon="md-add">添加类型</Button>
                        <Dropdown @on-click="handleDropdown">
                            <Button>更多
                                <Icon type="md-arrow-dropdown"/>
                            </Button>
                            <DropdownMenu slot="list">
                                <DropdownItem name="editIndustryType">编辑类型</DropdownItem>
                                <DropdownItem name="delIndustryType">删除类型</DropdownItem>
                                <DropdownItem name="refreshIndustry">刷新</DropdownItem>
                            </DropdownMenu>
                        </Dropdown>
                    </Row>
                    <Alert show-icon>
                        当前选择： <span class="select-title">{{editTitle}}</span>
                    </Alert>
                    <div class="tree-bar">
                        <Tree ref="tree" :data="treeData" @on-select-change="selectTree"></Tree>
                    </div>
                </Card>
            </Col>
            <Col :span="span">
                <Card title="考试管理">
                    <Row @keydown.enter.native="handleSearch">
                        <Form ref="certificateName" :model="searchForm" inline :label-width="70">
                            <Form-item label="考试名称" prop="courseTitle">
                                <Input type="text" v-model="searchForm.certificateName" placeholder="请输入考试名称" clearable style="width: 200px"/>
                            </Form-item>
                            <Form-item style="margin-left:-35px;" class="br">
                                <Button @click="handleSearch" type="primary" icon="ios-search">搜索</Button>
                                <Button @click="handleReset">重置</Button>
                                <a class="drop-down" @click="dropDown">{{dropDownContent}}
                                    <Icon :type="dropDownIcon"></Icon>
                                </a>
                            </Form-item>
                        </Form>
                    </Row>
                    <Row class="operation">
                        <Tooltip content="请选项分类" placement="top" :disabled="!addExamBtn">
                            <Button @click="add" type="primary" :disabled="addExamBtn" icon="md-add">添加</Button>
                        </Tooltip>
                        <circleLoading v-if="operationLoading"/>
                    </Row>
                    <Row>
                        <Table :loading="loading" border :columns="columns"  size="small"  :data="data" sortable="custom" @on-sort-change="changeSort" @on-selection-change="showSelect" ref="table"></Table>
                    </Row>
                    <Row type="flex" justify="end" class="page">
                        <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10,20,50]" size="small" show-total show-elevator show-sizer></Page>
                    </Row>
                </Card>
                <Modal :title="industryModalTitle" v-model="industryModalVisible" :mask-closable="false" :width="500" :styles="{top: '30px'}">
                    <Form ref="form" :model="form" :label-width="70" :rules="formValidate">
                        <FormItem label="分类名称" prop="examTypeName">
                            <Input v-model="form.examTypeName" placeholder="请输入考试分类名称"/>
                        </FormItem>
                        <FormItem label="分类编码" prop="examTypeCode">
                            <Input v-model="form.examTypeCode" placeholder="请输入考试分类编码"/>
                        </FormItem>
                        <FormItem label="分类排序" prop="sortOrder">
                            <InputNumber type="number" v-model="form.sortOrder" placeholder="请输入分类排序"/>
                        </FormItem>
                    </Form>
                    <div slot="footer">
                        <Button type="text" @click="industryModalVisible=false">取消</Button>
                        <Button type="primary" :loading="submitLoading" @click="handelSubmitDict">提交</Button>
                    </div>
                </Modal>
            </Col>
        </Row>
        <arrangement-drawer ref="arrangementDrawer"></arrangement-drawer>
        <sessionsManage ref="sessionsManage"></sessionsManage>
        <applyItemManage ref="applyItemManage"></applyItemManage>
    </div>
</template>delExamTypeById

<script>
    import circleLoading from "../../my-components/circle-loading.vue";
    import {examinationList, setOpenStatus, editExamType, getExamTypeTree ,delExamTypeById } from "@/api/bus";
    import arrangementDrawer from "./arrangement-drawer";
    import sessionsManage from "./sessions/sessionsManage";
    import applyItemManage from "./items/applyItemManage";
    export default {
        name: "arrangement-manage",
        components: {
            circleLoading,
            arrangementDrawer,
            sessionsManage,
            applyItemManage
        },
        data() {
            return {
                span: 19,
                loading: false, // 表单加载状态
                addExamBtn: true,
                operationLoading: false,
                submitLoading: false, // 添加或编辑提交状态
                drop: false,
                selectCount: 0, // 多选计数
                selectList: [], // 多选数据
                dropDownContent: "展开",
                dropDownIcon: "ios-arrow-down",
                editTitle: "",
                selectNode: {},
                industryModalVisible: false,
                industryModalTitle: '添加行业',
                treeData: [],
                form: {
                    id: '',
                    examTypeCode: '',
                    examTypeName: '',
                    sortOrder: 0,
                },
                formValidate: {
                    examTypeName: [{required: true, message: "考试分类名称不能为空", trigger: "blur"}],
                    sortOrder: [{required: true, type: 'number', message: "排序不能为空", trigger: "blur"}],
                    examTypeCode: [{required: true, message: "考试分类编码不能为空", trigger: "blur"}]
                },
                searchForm: {
                    pageNumber: 1, // 当前页数
                    pageSize: 10, // 页面大小
                    sort: "e.createTime", // 默认排序字段
                    order: "desc", // 默认排序方式
                    courseTitle: "",
                    userName: "",
                    startDate: "",
                    endDate: "",
                    examType: 0,
                    examTypeId: 0
                },
                selectDate: null, //选择日期绑定modal
                columns: [

                    {
                        type: "index",
                        width: 50,
                        fixed: "left",
                        align: "center"
                    },
                    {
                        title: "考试名称",
                        align: "center",
                        fixed: "left",
                        width: 250,
                        key: "examName"
                    },
                    {
                        title: "考试分类名称",
                        align: "center",
                        width: 200,
                        key: "examTypeName"
                    },
                    {
                        title: "考试code值",
                        align: "center",
                        width: 150,
                        key: "examinationCode"
                    },
                    {
                        title: "报考开始时间",
                        align: "center",
                        width: 200,
                        key: "applyBeginDate"
                    },
                    {
                        title: "报考结束时间",
                        align: "center",
                        width: 200,
                        key: "applyEndDate"
                    },
                    {
                        title: "缴费结束时间",
                        align: "center",
                        width: 200,
                        key: "payEndDate"
                    },
                    {
                        title: "退考截止时间",
                        align: "center",
                        width: 200,
                        key: "quitDate"
                    },
                    {
                        title: "报名金额",
                        align: "center",
                        width: 100,
                        key: "amount"
                    },
                    {
                        title: "考试方式",
                        align: "center",
                        key: "exanMode",
                        width: 100,
                        render: (h, params) => {
                            let re = "";
                            if (params.row.exanMode === "1") {
                                re = "网络考试";
                            } else{
                                re = "线下考试";
                            }
                            return h("div", re);
                        }
                    },
                    {
                        title: "报考条件",
                        align: "center",
                        width: 250,
                        key: "examItem"
                    },
                    {
                        title: "考试地址",
                        align: "center",
                        width: 200,
                        key: "examinationHtml"
                    },
                    {
                        title: "是否发布",
                        key: "isOpen",
                        align: "center",
                        width: 100,
                        render: (h, params) => {
                            return h(
                                "i-switch",
                                {
                                    props: {
                                        value: params.row.isOpen,
                                        size: "large",
                                        "true-value": 1,
                                        "false-value": 0
                                    },
                                    on: {
                                        "on-change": v => {
                                            this.setOpenStatus(params.row,v);
                                        }
                                    }
                                },
                                [
                                    h("span", {slot: "open"}, "已发布"),
                                    h("span", {slot: "close"}, "未发布")
                                ]
                            );
                        }
                    },
                    {
                        title: "操作",
                        key: "action",
                        align: "center",
                        fixed: "right",
                        width: 180,
                        render: (h, params) => {
                            return h("div", [
                                h(
                                    "Button",
                                    {
                                        props: {
                                            type: "primary",
                                            size: "small"
                                        },
                                        style: {
                                            marginRight: "5px"
                                        },
                                        on: {
                                            click: () => {
                                                this.edit(params.row);
                                            }
                                        }
                                    },
                                    "编辑"
                                ),
                                h(
                                    "Dropdown",
                                    {
                                        props: {transfer: true},
                                        on: {
                                            "on-click": v => {
                                                this.changeDropDown(params.row, v);
                                            }
                                        }
                                    },
                                    [
                                        h(
                                            "Button",
                                            {
                                                props: {size: "small"},
                                                style: {
                                                    height: "23.5px"
                                                }
                                            },
                                            "更多操作 ∨"
                                        ),

                                        h("DropdownMenu", {slot: "list"}, [
                                            h("DropdownItem", {props: {name: "sessions"}}, "考试场次"),
                                            h("DropdownItem", {props: {name: "items"}}, "报考条件")
                                        ])
                                    ]
                                )
                            ]);
                        }
                    }],
                data: [], // 表单数据
                total: 0 // 表单数据总数
            }
        },
        methods: {
            init() {
                this.getDataList();
                this.getAllType();
            },
            changeDropDown(row, v) {
                if (v == "sessions") {
                    this.sessions(row);
                }
                if (v == "items") {
                    this.applyItem(row);
                }
            },
            handleDropdown(name) {
                if (name == "editIndustryType") {
                    if (!this.selectNode.id) {
                        this.$Message.warning("您还未选择要编辑的分类");
                        return;
                    }
                    this.editIndustryType();
                } else if (name == "delIndustryType") {
                    this.delIndustryType();
                } else if (name == "refreshIndustry") {
                    this.refreshIndustry();
                }
            },
            handelSubmitDict() {
                this.$refs.form.validate(valid => {
                    if (valid) {
                        this.submitLoading = true;
                        // 添加 避免编辑后传入id等数据 记得删除
                        editExamType(this.form).then(res => {
                            this.submitLoading = false;
                            if (res.status === true) {
                                this.$Message.success("操作成功");
                                this.getAllType();
                                this.industryModalVisible = false;
                            }
                        });
                    }
                });
            },
            refreshIndustry() {
                this.getAllType();
                this.selectNode = {};
                this.editTitle = "";
                this.searchForm.examTypeId = 0
                this.getDataList();
            },
            getAllType() {
                this.treeLoading = true;
                getExamTypeTree().then(res => {
                    this.treeLoading = false;
                    this.treeData = res.data;
                });
            },
            addIndustryType() {
                this.form.id = ''
                this.form.examTypeName = ''
                this.form.examTypeCode = ''
                this.form.sortOrder = 0
                this.industryModalTitle = "添加考试类型";
                this.$refs.form.resetFields();
                this.industryModalVisible = true;
            },
            editIndustryType() {
                this.industryModalTitle = "编辑考试类型";
                this.industryModalVisible = true;
            },
            delIndustryType() {
                if (!this.selectNode.id) {
                    this.$Message.warning("您还未选择要删除的行业");
                    return;
                }
                this.$Modal.confirm({
                    title: "确认删除",
                    loading: true,
                    content: "您确认要删除 " + this.selectNode.title + " ?",
                    onOk: () => {
                        // 删除
                        delExamTypeById(this.selectNode.id).then(res => {
                            this.$Modal.remove();
                            if (res.status === true) {
                                this.$Message.success("操作成功");
                                this.refreshIndustry();
                            }
                        });
                    }
                });
            },
            selectTree(v) {
                if(v.length < 1){
                    this.addExamBtn = true;
                    this.editTitle = ''
                    this.searchForm.examTypeId = 0
                    // 重新加载表
                    this.searchForm.pageNumber = 1;
                    this.searchForm.pageSize = 10;
                    this.getDataList();
                    return
                }
                this.addExamBtn = false;
                this.editTitle = v[0].title;
                this.searchForm.examTypeId = v[0].value
                for (let attr in v[0]) {
                    if (v[0][attr] === null) {
                        v[0][attr] = "";
                    }
                }
                let str = JSON.stringify(v[0]);
                let data = JSON.parse(str);
                this.selectNode = data;
                this.form = data;
                // 重新加载表
                this.searchForm.pageNumber = 1;
                this.searchForm.pageSize = 10;
                // 重新加载表
                this.getDataList();
            },
            sessions(v) {
                this.$refs.sessionsManage.showDrawer(v);
            },
            applyItem(v) {
                this.$refs.applyItemManage.showDrawer(v);
            },
            getDataList() {
                this.loading = true;
                examinationList(this.searchForm).then(res => {
                    this.loading = false;
                    this.data = res.data.rows;
                    this.total = res.data.total;
                });
            },
            add() {
                let query = {examTypeId: this.searchForm.examTypeId,examType: this.searchForm.examType}
                this.$refs.arrangementDrawer.showDrawer(query);
            },
            edit(v) {
                let query = {id: v.id, examTypeId: this.searchForm.examTypeId,examType: this.searchForm.examType};
                this.$refs.arrangementDrawer.showDrawer(query);
            },
            //设置课程推荐状态
            handleSearch() {
                this.searchForm.pageNumber = 1;
                this.searchForm.pageSize = 10;
                this.getDataList();
            },
            handleReset() {
                this.$refs.searchForm.resetFields();
                this.searchForm.pageNumber = 1;
                this.searchForm.pageSize = 10;
                this.selectDate = null;
                this.searchForm.startDate = "";
                this.searchForm.endDate = "";
                // 重新加载数据
                this.getDataList();
            },
            dropDown() {
                if (this.drop) {
                    this.dropDownContent = "展开";
                    this.dropDownIcon = "ios-arrow-down";
                } else {
                    this.dropDownContent = "收起";
                    this.dropDownIcon = "ios-arrow-up";
                }
                this.drop = !this.drop;
            },
            changePage(v) {
                this.searchForm.pageNumber = v;
                this.getDataList();
                this.clearSelectAll();
            },
            changePageSize(v) {
                this.searchForm.pageSize = v;
                this.getDataList();
            },
            changeSort(e) {
                this.searchForm.sort = e.key;
                this.searchForm.order = e.order;
                if (e.order === "normal") {
                    this.searchForm.order = "";
                }
                this.getDataList();
            },
            showSelect(e) {
                this.selectList = e;
                this.selectCount = e.length;
            },
            clearSelectAll() {
                this.$refs.table.selectAll(false);
            },
            //设置发布状态
            setOpenStatus(row,v){
                if(row.examItemJson == ''){
                    this.$Message.error('请设置报考条件')
                    this.getDataList();
                    return
                }
                let params={
                    id:row.id,
                    isOpen:v
                };
                setOpenStatus(params).then(res => {
                    if (res.status === true) {
                        this.$Message.success(res.info);
                    }
                });
            },
        },
        mounted() {
            this.init();
        }
    }
</script>
